<template>
	<view class="feed flex--col">
		<view class="feed-slogan flex--row">
			<image aria-label="出行分享" src="@/static/index/partner.svg" class="icon"></image>
			<text>我们在世界上留下的印记</text>
		</view>
		<Loading v-if="loading">正在加载中</Loading>
		<view class="feed-item flex--col" v-else>
			<view class="feed-item-title flex--row">
				<text class="text--main-dark">{{recommendation.routeInfo.name}}</text>
				<view class="feed-item-switch icon--middle" role="button" aria-label="查看出行路线"  @click="feedIndex = 1"  v-show="feedIndex === 0">
					<image src="@/static/index/footsteps.svg" class="image-max-width"></image>
				</view>
				<view class="feed-item-switch icon--middle" role="button" aria-label="查看出行评价" @click="feedIndex = 0"  v-show="feedIndex === 1">
					<image src="@/static/index/comment.svg" class="image-max-width" ></image>
				</view>
			</view>
			
			<view class="feed-content feed-content--comment flex--row" v-show="feedIndex === 0">
				<view class="comment-author flex--col">
					<view class="comment-author-item flex--row" role="button" aria-label="盲人评价" :class="{'active':commentIndex === 0}" @click="switchComment(0)">
						<image aria-label="盲人头像"  :src="recommendation.userAvatar" class="icon--middle" ></image>
					</view>
					<view class="comment-author-item flex--row" role="button" aria-label="志愿者评价" :class="{'active':commentIndex === 1}" @click="switchComment(1)">
						<image aria-label="志愿者头像" :src="recommendation.volunteerAvatar" class="icon--middle"></image>
					</view>
				</view>
				<view class="comment-content flex--col">
					<view class="comment-content-list flex--col">
						<view class="comment-content-item flex--col" v-for="(comment,index) in currentComment.comments" :key="index">
							<view class="comment-tag text--secondary-dark">
								{{ comment.name }}
							</view>
							<view class="comment-text text--thirdary-dark">
								{{ comment.comment }}
							</view>
						</view>
					</view>
					<view class="comment-content-image" >
						<image :src="currentComment.imgList[0]" class="image-max-width" mode="aspectFill" role="img" aria-label="评价图片"></image>
					</view>
				</view>
			</view>
			<view class="feed-content feed-content--route"  v-show="feedIndex === 1">
				<RouteInfo :routeInfo="recommendation.routeInfo" v-if="recommendation"></RouteInfo>
			</view>
		</view>
		<view class="feed-reload" @click="refreshRecommendation" role="button" aria-label="刷新每日推荐">
			<image aria-label="刷新每日推荐" src="@/static/index/reload.svg" class="icon"></image>
		</view>
	</view>
</template>

<script>
	import Loading from "@/components/Loading/Loading.vue"
	import RouteInfo from "./RouteInfo.vue"
	import {recommend} from "@/api/common/common.js"
	
	export default {
		components:{
			RouteInfo,
			Loading
		},
		data(){
			return {
				loading:true,
				feedIndex:0,
				commentIndex:0,
				comments:{},
				currentComment:{},
				recommendation:{},
			}
		},
		methods:{
			async getRecommendation(){
				this.loading = true
				this.recommendation = await recommend()
			
				const userCommentImages = this.recommendation.userEvaluateInfo.map(info => info.imgList)
				const volunteerCommentImages = this.recommendation.volunteerEvaluateInfo.map(info => info.imgList)
				this.comments.userEvaluateInfo = {
					comments:this.recommendation.userEvaluateInfo,
					imgList:userCommentImages.flat()
				}
				this.comments.volunteerEvaluateInfo = {
					comments:this.recommendation.volunteerEvaluateInfo,
					imgList:volunteerCommentImages.flat()
				}
				this.currentComment = this.comments.userEvaluateInfo
				this.loading = false
			},
			switchComment(index){
				if(this.commentIndex === index){
					return
				}
				this.currentComment = index === 0 ? this.comments.userEvaluateInfo : this.comments.volunteerEvaluateInfo
				this.commentIndex = index
			},
			async refreshRecommendation(){
				this.feedIndex = 0
				this.commentIndex = 0
				this.recommendation = null
				await this.getRecommendation()
			}
		},
		async created(){
			await this.getRecommendation()
		}
	}
	
</script>

<style lang="scss" scoped>
	.text--main-dark{
		font-size: 26px;
		font-weight: 700;
		color:#333;
	}
	
	.text--secondary-dark{
		font-size: 20px;
		font-weight: 700;
		color:#333;
	}
	
	.text--thirdary-dark{
		font-size: 16px;
		font-weight: 500;
		color:#666;
	}
	
	.feed{
		height:800rpx;
		position:relative;
		gap:12px;
		padding-top:48rpx;	
		.feed-slogan{
			align-items: center;
			
			color:$main-color;
			font-weight: 700;
		}
		
		.feed-item{
			@include border-four-roundings;
			padding:64rpx 32rpx;
			position:relative;
			&.inactive{
				visibility:hidden;
			}
			
			.feed-item-title{
				justify-content: space-between;
				position:relative;
				padding:12px 0px;
				&::after{
					position:absolute;
					content:'';
					left:0;
					bottom:0%;
					width:20%;
					height:20rpx;
					background-color: $main-color;
				}
			}
					
			.feed-content{
				height: 800rpx;
				padding-top:48rpx;
				justify-content: space-between;
			}
			
		}
	}
		
	.feed-content--comment{
		.comment-author{
			gap:16rpx;
			align-items: center;
			
			.comment-author-item{
				align-items:center;
				&.active{
					background-color: rgba($main-color--light,0.3);
					padding:8px;
					border-radius: 50%;
				}
				image{
					border-radius: 50%;
				}
			}
		}
		
		
		.comment-content{
			gap:24rpx;
			width:75%;
			height:800rpx;
			
			.comment-content-list{
				height:60%;
				overflow:scroll;
				gap:32rpx;
				
				.comment-content-item{
					gap:12rpx;
					.comment-text{
						overflow-y:scroll;
						line-height: 1.4;
						letter-spacing: 0.8px;
					}
				}
			}
			
			.comment-content-image{
				width:100%;
				height:320rpx;
				border-radius: 10px;
				overflow: hidden;
				
				margin-top:auto;
			}
					
		}
		
	}
	.feed-reload{
		text-align: right;
	}
</style>